// 定义测试组件
import {Button, Tag} from "antd";
//  引入状态管理
import {useAtom} from 'jotai';
//获取计数原子
import {countAtom} from "../store/atoms";

//接收来自父组件的值
interface nameProps {
    name: string,
}

/**
 *  测试组件
 * @param props
 * @constructor
 */
export const Test = (props: nameProps) => {
    //获取状态管理的计数值
    const [countNum, setCountNum] = useAtom(countAtom);

    /**
     *   增加计数
     */
    const increaseEvent= () => {
        setCountNum(countNum => countNum + 1);
    };


    /**
     *  减少计数
     */
    const decreaseEvent = () => {
        if (countNum > 0){
            setCountNum(countNum => countNum - 1);
        }
    };

    //测试组件的页面回显
    return (
        <>
            <div>
                <div style={{marginTop: 20, backgroundColor: 'red'}}>
                    <Button onClick={decreaseEvent}>减少</Button>
                    <Tag>{countNum}---</Tag>
                    <Button onClick={increaseEvent}>新增</Button>
                </div>
                来自父组件的值：----{props.name}
            </div>
        </>
    );
};
